/**@author Jason 吕建辉
 * @data 2018-04-07
 * @描述：模板组件采用 layui-2.2.6 操作手册可参考管饭文档
 */
//提取弹窗组件为公共
var layer;
layui.use(['table', 'layer', 'form'], function () {
    var table = layui.table, form = layui.form;
    layer = layui.layer;
    var tableIns = table.render({
        id: 'table',
        elem: '#table',
        url: '/rbac/role/list',
        where: $('#searchFrom').containerJson(),
        method: 'get', //如果无需自定义HTTP类型，可不加该参数
        request: pageRequest,
        response: pageResponse,
        page: pagenation,
        cellMinWidth: 60,//全局定义常规单元格的最小宽度
        cols: [[
            {
                field: 'name',
                title: '角色名称',
                align: 'center'
            }, {
                field: 'remark',
                title: '角色描述',
                align: 'center'
            }, /*{
                field: 'createdTime',
                title: '创建时间',
                align: 'center',
                templet: function (data) {
                    return dateFormatter(data.createdTime);
                }
            },*/ {
                fixed: 'right',
                title: '操作',
                align: 'center',
                toolbar: '#toolbar'
            }
        ]]
    });
    //所有用户 依赖 table
    loadAllUser(table);
    //所有菜单 依赖 form
    var xtree = loadAllMenu(form);
    // 绑定操作
    var $2 = layui.$, active = {
        reset: function () {//重置
            clearSearch();
        },
        add: function () {//新增
            $('#addOrUpdate').form('clear');
            openForm('addOrUpdate');
        }
    };
    $2('.layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    //监听 新增/编辑 表单提交
    form.on('submit(addOrUpdate)', function (data) {
        commitFrom(tableIns);
    });
    //监听 查询表单提交
    form.on('submit(search)', function (data) {
        tableIns.reload({
            page: {curr: 1},
            where: data.field
        });
        return false;//防止页面刷新
    });
    //表格最后一列操作按钮监听
    table.on('tool(table)', function (obj) {
        var data = obj.data;
        if (obj.event === 'addUser') {
            loadRoleUser(data.id, table);
        } else if (obj.event === 'addMenu') {
            loadRoleMenu(data.id, form);
        } else if (obj.event === 'del') {
            deleteById(data.id, tableIns);
        } else if (obj.event === 'edit') {
            $('#addOrUpdate').form('load', data);
            form.render('select');//渲染下拉框，必须加，不然不起作用
            openForm('addOrUpdate');
        }
    });
});

//清空查询条件
function clearSearch() {
    $('.layui-input').val("");
}

//打开表单
function openForm(id) {
    layer.open({
        type: 1,
        title: '新增角色',
        shadeClose: true,
        skin: 'layui-layer-rim',
        anim: 2,
        shade: 0.3,
        maxmin: true,
        area: ['50%', '50%'],
        content: $('#' + id) //用id时 ，type 必须 =1
    });
}

//新增 or 更新 提交表单
function commitFrom(tableIns) {
    var data = $('#addOrUpdate').serializeJson();
    var url = '/rbac/role/add';
    if (data.id) {
        url = '/rbac/role/update'
    }
    $.ajax({
        url: url,
        data: data,
        method: 'post',
        success: function (res) {
            if (res.flag) {
                layer.msg('处理成功', {time: 2000}, function () {
                    reloadTable(tableIns);
                });
            } else {
                layer.msg(res.msg, {time: 2000});
            }
        }
    })
}

function reloadTable(tableIns) {
    tableIns.reload({
        page: {curr: 1},
        where: {}
    });
}

/**
 * 加载角色对应的用户
 */
function loadRoleUser(roleId, table) {
    $.ajax({
        url: '/rbac/query/roleUser',
        method: 'get',
        data: {
            roleId: roleId
        },
        async: false,
        success: function (result) {
            if (result.flag) {
                clearCheckbox('roleUser');
                checkUser(result.data);
                openFormWithBtn('roleUser', true, table, roleId);
            } else {
                layer.msg('加载失败！！');
            }
        }
    });
}

//加载角色菜单
function loadRoleMenu(roleId, form) {
    $.ajax({
        url: '/rbac/query/roleMenu',
        method: 'get',
        data: {
            roleId: roleId
        },
        async: false,
        success: function (result) {
            if (result.flag) {
                xTree3.render();
                checkMenu(result.data);
                openFormWithBtn('roleMenuForm', false, form, roleId);
            } else {
                layer.msg('加载失败！！');
            }
        }
    });
}

function openFormWithBtn(formId, isUser, module, roleId) {
    layer.open({
        type: 1,
        title: '关联角色',
        shadeClose: true,
        skin: 'layui-layer-rim',
        anim: 2,
        shade: 0.3,
        maxmin: true,
        btn: ['提交'],
        area: ['50%', '80%'],
        content: $('#' + formId), //用id时 ，type 必须 =1
        yes: function (index, layero) {
            if (isUser) {
                var checkStatus = module.checkStatus('roleUser');
                var data = checkStatus.data;
                var userIds = '';
                for (var i = 0; i < data.length; i++) {
                    userIds += data[i].id;
                    if (i != (data.length - 1)) {
                        userIds += ',';
                    }
                }
                commitRoleUser(roleId, userIds)
            } else {
                var data = xTree3.GetChecked();
                var menuIds = '';
                for (var i = 0; i < data.length; i++) {
                    menuIds += data[i];
                    if (i != (data.length - 1)) {
                        menuIds += ',';
                    }
                }
                commitRoleMenu(roleId, menuIds);
            }
        }
    });
}

function commitRoleUser(roleId, userIds) {
    $.ajax({
        url: '/rbac/update/roleUser',
        method: 'post',
        data: {
            roleId: roleId,
            userIds: userIds
        },
        success: function (result) {
            if (result.flag) {
                layer.closeAll();
                layer.msg('关联成功', {time: 3000});
            } else {
                layer.msg(result.msg);
            }
        }
    });
}

function commitRoleMenu(roleId, menuIds) {
    $.ajax({
        url: '/rbac/update/roleMenu',
        method: 'post',
        data: {
            roleId: roleId,
            menuIds: menuIds
        },
        success: function (result) {
            if (result.flag) {
                layer.closeAll();
                layer.msg('关联成功', {time: 3000});
            } else {
                layer.msg(result.msg);
            }
        }
    });
}

/**
 * 初始化加载用户和菜单
 */
var allUser;
var xTree3;

function loadAllUser(table) {
    $.ajax({
        url: '/rbac/user/all',
        method: 'get',
        async: false,
        success: function (result) {
            if (result.flag) {
                table.render({
                    id: 'roleUser',
                    elem: '#roleUserTable',
                    even: true,
                    data: result.data,
                    cols: [[
                        {field: 'id', type: 'checkbox'},
                        {
                            field: 'userName',
                            title: '用户名',
                            align: 'center',
                            width: '22.5%'
                        }, {
                            field: 'loginName',
                            title: '登录账号',
                            align: 'center',
                            width: '22.5%'
                        }
                    ]],
                    done: function (res, curr, count) {
                        allUser = res.data;
                    }
                });
            } else {
                layer.msg('加载失败！！');
            }
        }
    });
}

/**
 * 加载所有菜单树
 */
function loadAllMenu(form) {
    $.ajax({
        url: '/rbac/menu/tree',
        method: 'get',
        async: false,
        success: function (result) {
            if (result.flag) {
                xTree3 = new layuiXtree({
                    elem: 'roleMenu',                   //必填三兄弟之老大
                    form: form,                         //必填三兄弟之这才是真老大
                    data: result.data,                  //必填三兄弟之这也算是老大
                    isopen: true,                      //加载完毕后的展开状态，默认值：true
                    ckall: true,                        //启用全选功能，默认值：false
                    ckallback: function () {
                    },         //全选框状态改变后执行的回调函数
                    icon: {                             //三种图标样式，更改几个都可以，用的是layui的图标
                        open: "&#xe7a0;"                //节点打开的图标
                        , close: "&#xe622;"             //节点关闭的图标
                        , end: "&#xe621;"               //末尾节点的图标
                    },
                    color: {                            //三种图标颜色，独立配色，更改几个都可以
                        open: "#EE9A00"                 //节点图标打开的颜色
                        , close: "#EEC591"              //节点图标关闭的颜色
                        , end: "#828282"                //末级节点图标的颜色
                    },
                    click: function (data) {            //节点选中状态改变事件监听，全选框有自己的监听事件
                        console.log(data.elem);         //得到checkbox原始DOM对象
                        console.log(data.elem.checked); //开关是否开启，true或者false
                        console.log(data.value);        //开关value值，也可以通过data.elem.value得到
                        console.log(data.othis);        //得到美化后的DOM对象
                    }
                });
            }
        }
    });
}

/**
 * 用户选中
 */
function checkUser(userIds) {
    //循环所有数据，找出对应关系，设置checkbox选中状态
    for (var i = 0; i < allUser.length; i++) {
        $.each(userIds, function (indx, val) {
            //数据id和要勾选的id相同时checkbox选中
            if (val.userId == allUser[i].id) {
                //这里才是真正的有效勾选
                allUser[i]["LAY_CHECKED"] = 'true';
                //找到对应数据改变勾选样式，呈现出选中效果
                var index = allUser[i]['LAY_TABLE_INDEX'];
                $('#roleUser .layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                $('#roleUser .layui-table tr[data-index=' + index + '] .layui-form-checkbox').addClass('layui-form-checked');
            }
        });
    }
}

//选中菜单
function checkMenu(menuIds) {
    //循环所有数据，找出对应关系，设置checkbox选中状态
    $.each(menuIds, function (indx, val) {
        //数据id和要勾选的id相同时checkbox选中
        //这里才是真正的有效勾选
        $('#roleMenu input[value="' + val + '"]').prop('checked', true);
        $('#roleMenu input[value="' + val + '"]').next().addClass('layui-form-checked');
    });
}

function deleteById(id, obj) {
    layer.confirm('真的删除行么', function (index) {
        $.ajax({
            url: '/rbac/role/delete',
            method: 'post',
            data: {
                id: id
            },
            success: function (res) {
                if (res.flag) {
                    layer.close(index);
                } else {
                    layer.msg(res.msg, {time: 2000})
                }
                reloadTable(obj)
            }
        });

    });
}

function clearCheckbox(tableId) {
    var checkBoxArr = $('#' + tableId).find('input[type="checkbox"]');
    for (var i = 0; i < checkBoxArr.length; i++) {
        var checkbox = checkBoxArr[i];
        checkbox.checked = false;
        $(checkbox.nextSibling).removeClass("layui-form-checked");
    }
}